<template>
    <div class="wrapper">
      <!--suppress HtmlUnknownTarget -->
      <img class="backImg" v-if="backImage" :src="backImage" :alt="backImage">
      <div class="content" :style="paddingTopStyle">
        <div class="good" :style="[paddingTopStyle,styleDirectionGood]">
          <!--suppress HtmlUnknownTarget -->
          <img class="mainImg" v-if="image" :alt="image" :src="image"/>
          <div class="mainGoodInfo" v-if="linkGood" :style="styleDirectionMainGoodInfo">
            <span v-if="linkGood['price']" class="price">
              ${{linkGood['price']}}
            </span>
            <span v-if="linkGood['name']" class="content">
              {{linkGood['name']}}
            </span>
          </div>
        </div>
        <div class="title" :style="[paddingTopStyle, styleDirectionTitle]">
          <div class="inner">
            <span v-if="title">{{title}}</span>
            <xum-button v-if="linkGoodId" @click="handleToDetail">前往购买</xum-button>
          </div>
        </div>
        <div class="subGood" v-if="goods && typeof goods === 'object'">
          <ul>
            <li v-for="(item, index) in goods" :key="index">
              <!--suppress HtmlUnknownTarget -->
              <img :src="item['image']" alt="item['image']"/>
              <span :title="item['name']">{{item['name']}}</span>
              <span :title="item['price']">${{item['price']}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
import BackImage from '@img/banner/bannar1-img1.png'
import XumButton from '@/components/XumButton'
export default {
  name: 'IndexCarouselItem',
  components: { XumButton },
  props: {
    data: {
      required: true,
      type: Object
    },
    paddingTop: {
      required: false,
      type: Number,
      default: 66
    },
    direction: {
      required: false,
      type: String,
      default: 'LEFT'
    },
    backImage: {
      required: false,
      type: String,
      default: BackImage
    },
    title: {
      required: false,
      type: String,
      default: ''
    },
    image: {
      required: true,
      type: String
    },
    linkGoodId: {
      required: false,
      type: [String, Number],
      default: 0
    },
    linkGood: {
      required: false,
      type: Object,
      default: null
    },
    goods: {
      required: false,
      type: Array,
      default: () => { return [] }
    },
    goodFlag: {
      required: false,
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
    }
  },
  computed: {
    paddingTopStyle () {
      return {
        paddingTop: this.paddingTop + 'px'
      }
    },
    styleDirectionGood () {
      return this.isLeft ? {
        left: 0
      } : {
        right: 0
      }
    },
    styleDirectionMainGoodInfo () {
      return this.isLeft ? {
        right: 0,
        textAlign: 'left'
      } : {
        left: '6%',
        textAlign: 'right'
      }
    },
    styleDirectionTitle () {
      return this.isLeft ? {
        right: 0
      } : {
        left: '140px'
      }
    },
    isLeft () {
      return this.direction === 'LEFT'
    }
  },
  methods: {
    /**
     * 前往购买按钮，点击前往商品详情页面
     */
    handleToDetail () {
      if (this.linkGoodId && this.goodFlag) {
        this.$router.push('/shopDetail/' + this.linkGoodId)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  $paddingTop: 66px;
  .wrapper{
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;

    .backImg{
      width: 100%;
      height: 100%;
    }

    .content{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;

      .good{
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;

        .mainImg{
          height: 100%;
        }

        .mainGoodInfo{
          display: block;
          position: absolute;
          margin-top: $paddingTop;
          top: 30%;
          width: 170px;

          span{
            width: 100%;
            display: block;
            position: relative;
          }

          .price{
            font-weight: 700;
            color: #ff7353;
            font-size: 14px;
            line-height: 1.4;
          }

          .content{
            color: #333333;
            line-height: 1.4;
            font-weight: 700;
            font-size: 16px;
          }

        }

      }

      .title{
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;

        .inner{
          padding: 20px 80px;
          display: block;
          margin-top: 10%;
          text-align: left;

          span{
            display: block;
            color: #111111ee;
            font-weight: 700;
            line-height: 1;
            font-size: 50px;
            margin-bottom: 25px;
          }

        }

      }

      .subGood{
        width: 100%;
        height: 50%;
        position: absolute;
        left: 0;
        bottom: 30px;

        ul{
          width: 100%;
          list-style: none;
          display: block;
          position: absolute;
          left: 0;
          bottom: 100px;

          li{
            width: 100px;
            height: 150px;
            display: inline-block;
            color: #999999;
            font-size: 16px;
            text-decoration: none;
            outline: none;
            margin:0 10px;

            img{
              width: 100%;
              height: 100px;
              margin-bottom: 10px;
            }

            span{
              padding: 0 2px;
              display: block;
              width: 100%;
              height: 20px;
              line-height: 20px;
              text-align: left;
              font-weight: 700;
              color: #333333;
              font-size: 14px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              max-lines: 1;
            }

          }

        }

      }

    }

  }
</style>
